<include file="public:ucheader"/>
<load href="__TMPL__public/css/account.css" />
<!--样式-->
<load href="__TMPL__public/css/uc/css_b.css" />
<script type="text/javascript" src="__TMPL__public/js/uc/jquery.imgareaselect.min.js"></script>
<script type="text/javascript"> 

function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;

    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * {$src_width}),   //500为图像的宽度
        height: Math.round(scaleY * {$src_height}),//333为图像的高度
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
}

$(function () {
    $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview,x1: 20, y1: 20, x2: 160, y2: 140 });

});


$(document).ready(function () { 
	$('#save_thumb').click(function() {
		var x1 = $('#x1').val();
		var y1 = $('#y1').val();
		var x2 = $('#x2').val();
		var y2 = $('#y2').val();
		var w = $('#w').val();
		var h = $('#h').val();
   
        var scale = 32/w;
		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
			alert("请使用鼠标选择头像的位置");
			return false;
		}else{
            $.getJSON("{:U('uc/showface')}", {image:"<php>echo $_SESSION['face']</php>",w:w,h:h,x1:x1,y1:y1 }, function(json){
                $("#showface").remove();
                $(".tupdxzans").src=json[80];
                alert("JSON Data: " + json);
            });
			return true;
		}
	});
}); 
</script>
<load href="__TMPL__public/css/ucindex.css" /> 
<div class="ucleft">
	<!--用户-->
    <include file="userleft"/>
    <!--用户-->
   
    <br clear="all"/>
</div>
<div class="ucright">
	<div class="ucnav">
 		<ul>
        	<li><a href="{:u('uc/account_basic')}">基本信息</a></li>
            <li><a <eq name="ACTION_NAME" value="showface"> class="navon" </eq>  href="{:u('uc/account_face')}">上传头像</a></li>
            <li><a href="{:u('uc/account_sns')}">账号绑定</a></li>
            <li><a href="{:u('uc/account_pwd')}">修改密码</a></li>
        </ul>    	    
    </div>
    <div class="uccontent">

    <div class="uc_account clearfix"> 
        <!--右侧-->
        <form action="{:U('uc/doShowFace')}" method="post" enctype="multipart/form-data" >
        <div class="right_region exchange" style="width:700px;">
            <div class="yhxg_you_b">
                <div class="prompt_div">
                    <ul>
                        <li>1.选择图片</li>
                        <li class="hide_li"></li>
                        <li class="show_color">2.剪辑图片</li>
                        <li class="show_li"></li>
                        <li>3.修改完成</li>
                    </ul>
                </div>
                <div><span style="width: 140px;display:block;float:left;height:30px;">缩略头像：</span><span style="width: 500px;display:block;float:left;height:30px;">剪裁区域：<br/></span></div>
                <div align="center" id="yhxg_you_b">
                    <img src="{$Think.session.face}" id="photo"/>
          			<div style="border:1px #e5e5e5 solid; float:left; position:relative; overflow:hidden; width:100px; height:100px;">
         				 <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
					        <img src="{$Think.session.face}" style="width: 100px; height: 100px;" />
					      </div>
          			</div>
                </div>
                <div align="center" id="showface">
            			
            			<br style="clear:both;"/>
            		        <input type="hidden" name="image" value="{$Think.session.face}"/>  
            				<input type="hidden" name="x1" value="0" id="x1" />
            				<input type="hidden" name="y1" value="0" id="y1" />
            				<input type="hidden" name="x2" value="80" id="x2" />
            				<input type="hidden" name="y2" value="80" id="y2" />
            				<input type="hidden" name="w" value="80" id="w" />
            				<input type="hidden" name="h" value="80" id="h" />
            				<input type="submit" style="background: #ff6666;border:0;border-radius: 5px;width:100px;height:35px;color:#ffffff;" name="upload_thumbnail" value="下一步" id="save_thumb" />
            			
           		</div>
            </div>
            
        </div>
        </form>
    </div>

    </div>
</div>
<script type="text/javascript">
$(function(){ 
	$.formValidator.initConfig({formid:"myform",autotip:true,
		onerror:function(msg,obj){
			art.dialog({content:msg,lock:true,width:'200',height:'50'}, 
					   function(){this.close();$(obj).focus();})
			}
	});		
	$("#passwd").formValidator({onshow:"填写密码",onfocus:"填写6位以上密码"})
		.inputValidator({min:6,onerror:"请填写6位以上密码"});
		
	$("#new_pwd").formValidator({onshow:"填写密码",onfocus:"填写6位以上密码"})
		.inputValidator({min:6,onerror:"请填写6位以上密码"});

	$("#confirm_pwd").formValidator({onshow:"确认密码",onfocus:"确认密码",oncorrect:"填写正确"})
		.inputValidator({min:6,onerror:"请填写6位以上密码"})
		.compareValidator({desid:"new_pwd",operateor:"=",onerror:"两次输入密码不一致"});	
});
</script>
<include file="public:footer"/> 